<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>pydeck</title>
        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
    <script src='https://cdn.jsdelivr.net/npm/@deck.gl/jupyter-widget@~9.0.*/dist/index.js'></script>
    <style>
    body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#deck-container {
  width: 100vw;
  height: 100vh;
}

#deck-container canvas {
  z-index: 1;
  background: none;
}
    </style>
  </head>
  <body>
    <div id="deck-container">
    </div>
  </body>
  <script>
    const container = document.getElementById('deck-container');
    const jsonInput = {
  "initialViewState": {
    "bearing": -10,
    "latitude": 51.74,
    "longitude": -0.6,
    "pitch": 80,
    "zoom": 6
  },
  "layers": [
    {
      "@@type": "ArcLayer",
      "autoHighlight": true,
      "data": [
        {
          "PLACE": "Newcastle upon Tyne",
          "distance": 1802.0,
          "distance_m": "1802.0",
          "lat_i": -1.6341135156043956,
          "lat_j": -1.617439000000001,
          "lng_i": 54.991298681037044,
          "lng_j": 54.978251999999976,
          "model_name": "GPT-4o Mini"
        },
        {
          "PLACE": "Leeds",
          "distance": 2026.0,
          "distance_m": "2026.0",
          "lat_i": -1.5469321527320734,
          "lat_j": -1.5733000000000008,
          "lng_i": 53.81017429566294,
          "lng_j": 53.8008,
          "model_name": "GPT-4o Mini"
        },
        {
          "PLACE": "Bradford",
          "distance": 479.0,
          "distance_m": "479.0",
          "lat_i": -1.7590791008186553,
          "lat_j": -1.7549999999999997,
          "lng_i": 53.791440111029765,
          "lng_j": 53.79499999999999,
          "model_name": "GPT-4o Mini"
        },
        {
          "PLACE": "Kingston upon Hull",
          "distance": 1794.0,
          "distance_m": "1794.0",
          "lat_i": -0.3346899749252565,
          "lat_j": -0.3364999999999999,
          "lng_i": 53.76078653574552,
          "lng_j": 53.74470000000001,
          "model_name": "GPT-4o Mini"
        },
        {
          "PLACE": "Manchester",
          "distance": 1940.0,
          "distance_m": "1940.0",
          "lat_i": -2.218111427388106,
          "lat_j": -2.2425999999999995,
          "lng_i": 53.47128589192962,
          "lng_j": 53.4808,
          "model_name": "GPT-4o Mini"
        },
        {
          "PLACE": "Liverpool",
          "distance": 5127.0,
          "distance_m": "5127.0",
          "lat_i": -2.9151414380926117,
          "lat_j": -2.9916,
          "lng_i": 53.40235800290706,
          "lng_j": 53.40840000000001,
          "model_name": "GPT-4o Mini"
        },
        {
          "PLACE": "Sheffield",
          "distance": 1062.0,
          "distance_m": "1062.0",
          "lat_i": -1.4566254547750497,
          "lat_j": -1.469100000000001,
          "lng_i": 53.374851670870065,
          "lng_j": 53.380799999999994,
          "model_name": "GPT-4o Mini"
        },
        {
          "PLACE": "Stoke-on-Trent",
          "distance": 1537.0,
          "distance_m": "1537.0",
          "lat_i": -2.1628083816301733,
          "lat_j": -2.1592000000000007,
          "lng_i": 53.013748100322914,
          "lng_j": 53.000099999999996,
          "model_name": "GPT-4o Mini"
        },
        {
          "PLACE": "Nottingham",
          "distance": 1894.0,
          "distance_m": "1894.0",
          "lat_i": -1.177997132899367,
          "lat_j": -1.1615999999999989,
          "lng_i": 52.96864616657228,
          "lng_j": 52.9548,
          "model_name": "GPT-4o Mini"
        },
        {
          "PLACE": "Derby",
          "distance": 1502.0,
          "distance_m": "1502.0",
          "lat_i": -1.4708432091735535,
          "lat_j": -1.485300000000001,
          "lng_i": 52.9117091302744,
          "lng_j": 52.92199999999999,
          "model_name": "GPT-4o Mini"
        },
        {
          "PLACE": "Norwich",
          "distance": 1520.0,
          "distance_m": "1520.0",
          "lat_i": 1.2870623581799436,
          "lat_j": 1.296400000000001,
          "lng_i": 52.641012921192136,
          "lng_j": 52.628600000000006,
          "model_name": "GPT-4o Mini"
        },
        {
          "PLACE": "Leicester",
          "distance": 490.0,
          "distance_m": "490.0",
          "lat_i": -1.132212589538879,
          "lat_j": -1.136500000000001,
          "lng_i": 52.63334755386293,
          "lng_j": 52.63689999999999,
          "model_name": "GPT-4o Mini"
        },
        {
          "PLACE": "Wolverhampton",
          "distance": 1072.0,
          "distance_m": "1072.0",
          "lat_i": -2.1276148772864434,
          "lat_j": -2.1155000000000013,
          "lng_i": 52.59219590523995,
          "lng_j": 52.586,
          "model_name": "GPT-4o Mini"
        },
        {
          "PLACE": "Birmingham",
          "distance": 2119.0,
          "distance_m": "2119.0",
          "lat_i": -1.878408564152245,
          "lat_j": -1.8903999999999999,
          "lng_i": 52.46861347365909,
          "lng_j": 52.48619999999999,
          "model_name": "GPT-4o Mini"
        },
        {
          "PLACE": "Coventry",
          "distance": 809.0,
          "distance_m": "809.0",
          "lat_i": -1.5096634353891563,
          "lat_j": -1.4980139999999997,
          "lng_i": 52.410120041475004,
          "lng_j": 52.408645,
          "model_name": "GPT-4o Mini"
        },
        {
          "PLACE": "Northampton",
          "distance": 437.0,
          "distance_m": "437.0",
          "lat_i": -0.8839460561433691,
          "lat_j": -0.8833300000000011,
          "lng_i": 52.24441184729856,
          "lng_j": 52.24049999999999,
          "model_name": "GPT-4o Mini"
        },
        {
          "PLACE": "Luton",
          "distance": 2156.0,
          "distance_m": "2156.0",
          "lat_i": -0.43215426187187583,
          "lat_j": -0.418000000000001,
          "lng_i": 51.895287611404015,
          "lng_j": 51.878,
          "model_name": "GPT-4o Mini"
        },
        {
          "PLACE": "Bristol",
          "distance": 478.0,
          "distance_m": "478.0",
          "lat_i": -2.5931759540281423,
          "lat_j": -2.5879,
          "lng_i": 51.457252307856145,
          "lng_j": 51.45450000000001,
          "model_name": "GPT-4o Mini"
        },
        {
          "PLACE": "Reading",
          "distance": 1323.0,
          "distance_m": "1323.0",
          "lat_i": -0.9839895166258132,
          "lat_j": -0.9731000000000004,
          "lng_i": 51.44523992337285,
          "lng_j": 51.454999999999984,
          "model_name": "GPT-4o Mini"
        },
        {
          "PLACE": "Southampton",
          "distance": 1200.0,
          "distance_m": "1200.0",
          "lat_i": -1.3977176561855058,
          "lat_j": -1.4043999999999999,
          "lng_i": 50.919630128419854,
          "lng_j": 50.9097,
          "model_name": "GPT-4o Mini"
        },
        {
          "PLACE": "Brighton and Hove",
          "distance": 2176.0,
          "distance_m": "2176.0",
          "lat_i": -0.1403477067737495,
          "lat_j": -0.1424999999999995,
          "lng_i": 50.83880942398582,
          "lng_j": 50.8193,
          "model_name": "GPT-4o Mini"
        },
        {
          "PLACE": "Portsmouth",
          "distance": 2962.0,
          "distance_m": "2962.0",
          "lat_i": -1.0775489558490876,
          "lat_j": -1.0886000000000002,
          "lng_i": 50.82089705700909,
          "lng_j": 50.795199999999994,
          "model_name": "GPT-4o Mini"
        },
        {
          "PLACE": "Plymouth",
          "distance": 2449.0,
          "distance_m": "2449.0",
          "lat_i": -4.122584197996041,
          "lat_j": -4.1439,
          "lng_i": 50.392803410939386,
          "lng_j": 50.375499999999995,
          "model_name": "GPT-4o Mini"
        },
        {
          "PLACE": "Cardiff",
          "distance": 2347.0,
          "distance_m": "2347.0",
          "lat_i": -3.1834830476043785,
          "lat_j": -3.1791,
          "lng_i": 51.50252301283342,
          "lng_j": 51.4816,
          "model_name": "GPT-4o Mini"
        }
      ],
      "getSourceColor": [
        215,
        48,
        39,
        200
      ],
      "getSourcePosition": "@@=[lat_j, lng_j]",
      "getTargetColor": [
        238,
        232,
        220,
        220
      ],
      "getTargetPosition": "@@=[lat_i, lng_i]",
      "getTilt": 0,
      "getWidth": "@@=1.46",
      "id": "5bc120ff-e30b-4e1c-8f0b-3e5f33bc49a9",
      "pickable": true
    }
  ],
  "mapProvider": "carto",
  "mapStyle": "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
  "views": [
    {
      "@@type": "MapView",
      "controller": true
    }
  ]
};
    const tooltip = {'html': 'Place: <strong>{PLACE}</strong></br>Model: <strong>{model_name}</strong></br>Distance: <strong>{distance_m}m</strong>'};
    const customLibraries = null;
    const configuration = null;

    const deckInstance = createDeck({
                  container,
      jsonInput,
      tooltip,
      customLibraries,
      configuration
    });

  </script>
</html>